<!-- BEGIN:main -->

<script type="text/javascript">
    function group_drop_box_change(){
        if (document.getElementById('groupbox').value > 0){
            document.getElementById('ext_info').setAttribute('style', 'display:block;');
        }else{
            document.getElementById('ext_info').setAttribute('style', 'display:block;');
        }
    }
    function client_check_register(){
        topicname = document.getElementById('topicName').value;
        topicinfor = document.getElementById('topicInfor').value;
        
        if (topicname=="" || topicinfor==""){
            alert("Please enter the topic name and the topic infor!");
            document.getElementById('username').focus();
            return false;
        }

        return true;
    }
</script>
<div id="page_title">
    <h2>Add new topic</h2>
</div>
{MSG}
<form action="" method="POST" onsubmit="return client_check_register()">
    <table class="panel" id="form">
        <tr>
            <td><label for="topicName">Topic name:</label></td>
            <td width="70%"><input type="text" name="topicName" id="username" maxlength="30" size="40" value=""/></td>
        </tr>

        <tr>
            <td><label for="topicInfor">Topic infor:</label></td>
            <td width="70%"><textarea name="topicInfor" id="displayname"rows ="10" cols =" 35"></textarea></td>
        </tr>
        <script type="text/javascript">
         
            $(document).ready(function(){
            $("#groupbox").ready(function(){
                $(".ext_adviser_info").hide();
                $(".ext_stdent_info").hide();
                });
            });
            $(document).ready(function(){
             $("#groupbox").change(function(){
              
                $('html, body').animate({scrollTop: $(document).height()},1500);
                if(this.value != 1){
                    $(".ext_adviser_info").fadeOut();
                }else{
                    $(".ext_adviser_info").fadeIn();
                }
                if(this.value != 2){
                    $(".ext_stdent_info").fadeOut();
                }else{
                    $(".ext_stdent_info").fadeIn();
                }
              });
            });
        </script>
            
         <tr>

             <td>
                 
                <div id="back_home" >
                <a href="{BACK_HOME}">
                    <input  style="color: whitesmoke; float: left; margin:10px 5px;" class="button" type="button" name="back" value="Back")"/>
                </a>
                </div>

             </td>
             <td>
                 <input class="button" type="submit" name="submit" id="submit" value="Create" style="margin-top:10px;"/>
             </td>
        </tr>
    
    </table>
    
</form>



<!-- END:main -->

<!-- BEGIN:success_msg -->
<div id="msg" style="text-align:center;">One topic have been added!</div>
<div class="toolbar" style="text-align:center;">{TOOLBAR_LINKS}</div>
<!-- END:success_msg -->


